<template>
  <view class="workmark-text">
    <view
      v-if="value"
      class="workmark-text__type"
      :class="customClass"
    >
      <text class="workmark-text__title">{{type}}{{value.text || text}}</text>
      <text class="workmark-text__value">{{value.amount}}</text>
      <text
        class="workmark-text__right"
        v-if="value.type===0 && value.workloads"
      >（{{value.workloads}}个工）</text>
      <text
        class="workmark-text__right"
        v-else-if="value.type>0 && value.nums"
      >（{{value.nums}}笔）</text>
    </view>
    <view
      class="workmark-text__type"
      v-else
    >
      <text class="workmark-text__title">{{type}}{{text}}</text>
      <text class="workmark-text__value">{{placeholder}}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'WorkMarkText',
  props: {
    type: String,
    value: Object,
    text: String,
    color: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      content: null
    }
  },
  watch: {
  },
  mounted () {
  },
  computed: {
    customClass () {
      if (this.color) {
        return 'workmark-text__type-' + this.color
      }
      return ''
    }
  },
  methods: {

  }
}
</script>

<style lang="less">
.workmark-text {
  display: flex;
  align-items: center;
  color: #b37d18;

  &:first-child {
    color: #42a4e6;
  }

  &:last-child {
    color: #1ea130;
  }

  &__title {
    color: #969799;

    &:not(:empty)::after {
      content: "：";
    }
  }

  &__value {
    font-weight: bold;
  }

  &__right {
    color: #969799;
    font-size: 12px;
    font-weight: normal;
  }
}
</style>
